<template>
    <div>
        <h1>{{ name }}</h1>
        <h1>{{ act }}</h1>
        <h1>当前值为：{{ sum }}</h1>
        <h1>当前值放大10倍为：{{ bigSum }}</h1>
        <h1>人员总数:{{ persons.length }}</h1>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="increment(n)">+</button>
        <button @click="decrement(n)">-</button>
        <button @click="incrementOdd(n)">和为奇数再加</button>
        <button @click="incrementWait(n)">等会加</button>
    </div>
</template>

<script>
    import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
    export default {
        name:'Count',
        data(){
            return {
                n:1,
            }
        },
        computed:{
            //借助map
            ...mapState('countAbout',['sum','name','act']),
            ...mapState('personAbout',['persons']),
            ...mapGetters('countAbout',['bigSum']),
            //自己写
            // sum(){
            //     return this.$store.state.countAbout.sum
            // },
            // name(){
            //     return this.$store.state.countAbout.name
            // },
            // act(){
            //     return this.$store.state.countAbout.act
            // },
            // persons(){
            //     return this.$store.state.personAbout.persons
            // },
            // bigSum(){
            //     return this.$store.getters['countAbout/bigSum']
            // },
        },
        methods:{
            //借助map
            ...mapActions('countAbout',['incrementOdd','incrementWait']),
            ...mapMutations('countAbout',{
                increment:'INCREMENT',
                decrement:'DECREMENT'
            }),

            //自己写
            // incrementOdd(n){
            //     this.$store.dispatch('countAbout/incrementOdd',n)
            // },
            // incrementWait(n){
            //     this.$store.dispatch('countAbout/incrementWait',n)
            // },
            // increment(n){
            //     this.$store.commit('countAbout/INCREMENT',n)
            // },
            // decrement(n){
            //     this.$store.commit('countAbout/DECREMENT',n)
            // },
        },
    }
</script>

<style scoped>
    button {
        margin-left: 6px;
    }
</style>